<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-carousel" id="shuffling">
    <div carousel-item="">
        <div>
            <!--顶部搜索框-->
            <form class="layui-form" action="/log/queryAll" style="margin-top: 10px">
                <div class="layui-inline">
                    <label class="layui-form-label">登录名:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="loginName" autocomplete="off" placeholder="登录名" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">ip地址:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="ip" autocomplete="off" placeholder="ip地址" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">创建时间:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="createTime" id="createTime" autocomplete="off" placeholder="yyyy-MM-dd" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <button class="layui-btn" lay-submit lay-filter="searchFilter1">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-normal" id="myButton1">重置</button>
                    </div>
                </div>
            </form>
            <!--部门列表显示-->
            <table id="logTable" lay-filter="logFilter"></table>
        </div>
        <div>
            <!--顶部搜索框-->
            <form class="layui-form" action="/log/queryAll" style="margin-top: 10px">
                <div class="layui-inline">
                    <label class="layui-form-label">年份:</label>
                    <div class="layui-input-inline">
                        <select id="yselect" name="yearSelect">
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">月份:</label>
                    <div class="layui-input-inline">
                        <select id="mselect" name="monthSelect">

                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <button class="layui-btn" lay-submit lay-filter="searchFilter2">查询</button>
                        <button type="reset" class="layui-btn layui-btn-normal" id="myButton2">重置</button>
                    </div>
                </div>
            </form>
            <!--图表显示-->
            <div id="main" style="left:40px;width: 1000px;height:600px;"></div>
        </div>
    </div>
</div>
</body>
<script src="/layui/layui.js"></script>
<script src="/echarts/echarts.js"></script>
<script src="/echarts/chalk.js"></script>
<script>
    layui.use(['carousel','table','jquery','form', 'laydate'], function(){
        let carousel = layui.carousel;
        let laydate = layui.laydate;
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;

        laydate.render({
            elem: '#createTime'
        });

        //登录日志列表
        let logTable = table.render({
            elem: '#logTable' //table标签的id
            ,toolbar: '#toolbarHead'//开启头部工具栏，并为其绑定左侧模板
            ,url: '/log/queryAll' //数据接口
            ,page: true //开启分页，默认向后台发两个参数page和limit
            ,cellMinWidth: 50//自适应宽度，最短为80
            ,cols: [
                [ //表头 两个中括号不能在同一行，与thymeleaf语法冲突
                    {type: 'checkbox', fixed: 'left'} //开启复选框，必须有fixed
                    ,{field: 'id', title: 'ID', width:60, sort: true, fixed: 'left'}
                    ,{field: 'loginName', title: '登录名', width:120}
                    ,{field: 'userName', title: '用户名', width:120}
                    ,{field: 'ip', title: 'ip地址', width:120}
                    ,{field: 'className', title: '类名', width: 400}
                    ,{field: 'methodName', title: '方法名', width: 200}
                    ,{field: 'params', title: '参数', width: 200}
                    ,{field: 'createTime', title: '创建时间', width: 200}
                ]
            ]
        });

        //常规轮播
        carousel.render({
            elem: '#shuffling'
            , arrow: 'always'
            , width: '1150px'
            , height: '640px'
            , interval: 5000
        });

        //获取当前时间信息
        let date = new Date();
        let currYear = date.getFullYear();
        let currMonth = date.getMonth()+1;

        //填充年份下拉框
        let $yselect = $("#yselect");
        let options1 = "";
        $.ajax({
            url: "/log/queryYear",
            type: "GET",
            dataType: "JSON",
            success: function (data) {
                let years = data.data;
                // alert(years)
                //将数据放到select中
                for (let i = 0; i < years.length; i++) {
                    let year = years[i]
                    if (year===currYear){
                        options1 = options1+ '<option value="' + year + '" selected="selected">' + year + '</option>';
                    }else {
                        options1 = options1+ '<option value="' + year + '">' + year + '</option>';
                    }
                }
                $yselect.html(options1)
                //更新渲染，容易忘记加
                form.render()
            }
        })

        //填充月份下拉框
        let $mselect = $("#mselect");
        let options2 = "";
        for (let i = 1;i<=12;i++){
            if (i===currMonth){
                options2 += '<option value="' + i + '" selected="selected">' + i + '</option>';
            }else{
                options2 += '<option value="' + i + '">' + i + '</option>';
            }
        }
        $mselect.html(options2);
        //调用显示图表方法，默认显示当下时间的日志信息
        showOperLogChart(currYear,currMonth)
        //显示图表方法
        function showOperLogChart(year,month){
            let xdata = [];
            let count = [];
            $.ajax({
                url: "/log/queryShowChartData",
                type: "GET",
                async:false,//false为同步，必须响应代码执行完毕，才会执行该请求下面的代码，如果是true或者不写都是异步
                data: {year:year,month:month},
                dataType: "json",
                success: function (resp) {
                    //alert(3333);
                    if (resp.code == 0) {
                        let data = resp.data;

                        for (let i = 0; i < data.length; i++) {
                            xdata.push(data[i].day);
                            count.push(data[i].count);
                        }
                    }
                },
                error: function (e) {
                    layer.msg("请求失败");
                }
            });
            //alert(2222);
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: '登录日志分析图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:'操作次数'
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xdata
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        name: '操作次数',
                        type: 'line',
                        data: count,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        };

        //表单搜索框监听事件
        form.on('submit(searchFilter1)', function (data) {
            //执行重载
            logTable.reload({
                where: {
                    loginName: data.field.loginName,
                    ip: data.field.ip,
                    createTime: data.field.createTime
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //重置条件查询表单，刷新table数据
        $("#myButton1").click(function () {
            logTable.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    loginName: ""
                    , ip: ""
                    , createTime: ""
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

        //图表查询表单监听
        form.on('submit(searchFilter2)', function (data) {
            let year = data.field.yearSelect;
            let month = data.field.monthSelect;
            showOperLogChart(year,month);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //图表重置按钮监听
        $("#myButton2").click(function () {
            let date = new Date();
            let currYear = date.getFullYear();
            let currMonth = date.getMonth()+1;
            //赋予默认值
            $("#yselect").val(currYear);
            $("#mselect").val(currMonth);
            showOperLogChart(currYear,currMonth)
        });
    });
</script>
</html>